﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
}

<link href="~/lib/layui/css/layui.css" rel="stylesheet" />
<script src="~/lib/layui/layui.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品定义</title>
    <link href="//unpkg.com/layui@2.9.18/dist/css/layui.css" rel="stylesheet">
</head>
<body>

    <form class="layui-form" action="" style="margin:25px">
        <div>
            <input type="text" id="productNumber" placeholder="产品编号" class="layui-input" style="width: 300px; display: inline-block;">



            <button type="button" class="layui-btn layui-bg-blue" onclick="search()">查询</button>
            <button type="button" class="layui-btn layui-bg-green" onclick="showAddForm()">新增工序</button>
        </div>
    </form>

    <div style="margin:25px">
        <table id="processTable" class="layui-table">
            <thead>
                <tr>
                    <th>产品编号</th>
                    <th>产品名称</th>
                    <th>库存单位</th>
                    <th>产品规格</th>
                    <th>产品属性</th>
                    <th>工艺路线</th>
                    <th>最大库存</th>
                    <th>最小库存</th>
                    <th>安全库存</th>
                    <th>库存数量</th>
                    <th>成品图</th>
                    <th>创建人</th>
                    <th>创建时间</th>
                    <th>修改人</th>
                    <th>修改时间</th>
                </tr>
            </thead>
            <tbody>
                <!-- 添加了id属性 -->
                <!-- 产品列表数据将填充在这里 -->
            </tbody>
        </table>
    </div>

    <script src="//unpkg.com/layui@2.9.18/dist/layui.js"></script>
    <script src="//unpkg.com/jquery/dist/jquery.js"></script>

    <script>
        layui.use(['layer', 'form'], function () {
            var layer = layui.layer;
            var form = layui.form;
            var $ = layui.jquery;
            // 显示新增工序的弹框
            window.showAddForm = function () {
                layer.open({
                    type: 1,
                    title: '新增产品',
                    area: ['800px', 'auto'],
                    content: `
                                               <form class="layui-form" id="addProductForm">
                                                   <div class="layui-form-item">
                                                       <label class="layui-form-label">产品编号</label>
                                                       <div class="layui-input-inline">
                                                        <input style="width: 500px;" type="text" id="productNumber" name="productNumber"  placeholder="请输入产品编号，忽略将自动生成" class="layui-input">
                                                       </div>
                                                   </div>

                                                   <div class="layui-form-item">
                                                      <label class="layui-form-label">产品名称</label>
                                                      <div class="layui-input-inline">
                                                       <input  style="width: 500px;" type="text" id="productName" name="productName" lay-verify="required" placeholder="请输入产品名称" class="layui-input">
                                                      </div>
                                                  </div>

                                               <div class="layui-form-item">
                                                   <label class="layui-form-label">产品规格</label>
                                                   <div class="layui-input-inline">
                                                      <input  style="width: 500px;" type="text" id="productSpecification" name="productSpecification" lay-verify="required" placeholder="请输入产品规格" class="layui-input">
                                                   </div>
                                               </div>

                                                <div class="layui-form-item">
                                                    <label class="layui-form-label">库存单位</label>
                                                    <div class="layui-input-inline">
                                                       <select  style="width: 500px;" id="stockUnit" lay-filter="testSelect" required>
                                                      <option value="0">请选择库存单位</option>
                                                              <option value="1">条</option>
                                                              <option value="2">张</option>
                                                              <option value="3">车</option>
                                                              <option value="4">车</option>
                                                              <option value="5">天</option>
                                                              <option value="6">小时</option>
                                                              <option value="7">分钟</option>
                                                              <option value="8">周</option>
                                                              <option value="9">月</option>
                                                  </select>
                                                    </div>
                                                </div>

                                                <div class="layui-form-item">
                                                    <label class="layui-form-label">工艺路线</label>
                                                    <div class="layui-input-inline">
                                                        <select  style="width: 500px;" name="processRouteId" id="processRouteId" required>
                                                      <option value="0">请选择工艺路线</option>
                                                  </select>
                                                    </div>
                                                </div>

                                                 <div class="layui-form-item">
                                                    <label class="layui-form-label">产品属性</label>
                                                    <div class="layui-input-inline">
                                                     <select  style="width: 500px;" id="productStats" lay-filter="testSelect" required>
                                                      <option value="0">产品属性</option>
                                                      <option value="1">自制</option>
                                                      <option value="2">外购</option>
                                                  </select>
                                                    </div>
                                                </div>


                                                   <div class="layui-form-item">
                                                       <label class="layui-form-label">最大库存</label>
                                                       <div class="layui-input-inline">
                                                         <input  style="width: 500px;" type="number" id="maxInventory" name="maxInventory" lay-verify="required" placeholder="最大库存" class="layui-input">
                                                       </div>
                                                   </div>

                                                 <div class="layui-form-item">
                                                        <label class="layui-form-label">最小库存</label>
                                                        <div class="layui-input-inline">
                                                          <input  style="width: 500px;" type="number" id="minInventory" name="minInventory" lay-verify="required" placeholder="最小库存" class="layui-input">
                                                        </div>
                                                    </div>

                                                     <div class="layui-form-item">
                                                        <label class="layui-form-label">安全库存</label>
                                                        <div class="layui-input-inline">
                                                          <input  style="width: 500px;" type="number" id="saveInventory" name="saveInventory" lay-verify="required" placeholder="安全库存" class="layui-input">
                                                        </div>
                                                    </div>

                                                    <div class="layui-form-item">
                                                        <label class="layui-form-label">库存数量</label>
                                                        <div class="layui-input-inline">
                                                          <input  style="width: 500px;" type="number" id="saveInventory" name="saveInventory" disabled  class="layui-input">
                                                        </div>
                                                    </div>


                                                    <div class="layui-form-item">
                                                        <label class="layui-form-label">成品图</label>
                                                        <div class="layui-input-inline">
                                                          <input  style="width: 500px;" type="text" id="productImage" name="productImage" lay-verify="required" placeholder="请输入产品名称" class="layui-input">
                                                        </div>
                                                    </div>


                                                   <div class="layui-form-item">
                                                       <button  style="margin-left: 280px;" type="button" class="layui-btn" onclick="Add()">提交</button>
                                                   </div>
                                               </form>
                                                                    `
                });
                // 渲染表单元素
                form.render();
                getProcessRouteList(); // 加载工艺路线列表
            };
            // 定义新增函数
            window.Add = function () {

                var requestData = {
                    productNumber: document.getElementById('productNumber').value,
                    productName: document.getElementById('productName').value,
                    productSpecification: document.getElementById('productSpecification').value,
                    stockUnit: document.getElementById('stockUnit').value,
                    processRouteId: document.getElementById('processRouteId').value,
                    productStats: document.getElementById('productStats').value,
                    maxInventory: document.getElementById('maxInventory').value,
                    minInventory: document.getElementById('minInventory').value,
                    saveInventory: document.getElementById('saveInventory').value,
                    inventoryStore: 0,
                    productImage: document.getElementById('productImage').value,
                    createId: 1,
                    createName: "雷鑫",
                };

                // 发送 AJAX 请求
                fetch('@ViewBag.GlennQuigmrire' + '/api/Products/ProductCreate', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(requestData)
                })
                    .then(response => response.json())
                    .then(data => {
                        layer.msg('新增成功');
                        search(); // 新增后加载产品列表
                        layer.closeAll(); // 关闭弹框
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        layer.msg('新增失败');
                    });
            };

            $(function () {
                search(); getProcessRouteList();
            });

            // 加载产品列表
            window.search = function () {
                var requestData = {
                    productNumber: document.getElementById('productNumber').value || "",
                    pageIndex: 1,
                    pageSize: 10,
                    productName: "",
                    productSpecification: "",
                    stockUnit: 0,
                    processRouteId: 0,
                    productStats: 0,
                    maxInventory: 0,
                    minInventory: 0,
                    saveInventory: 0,
                    inventoryStore: 0,
                    createStartTime: "",
                    createEndTime: "",
                    updateStartTime: "",
                    updateEndTime: ""
                }
                $.post({
                    url: '@ViewBag.GlennQuigmrire' + '/api/Products/Handle',
                    data: JSON.stringify(requestData), // 使用 JSON 格式
                    async: false,
                    dataType: "json",
                    contentType: "application/json",
                    success: res => {
                        console.log(res); // 修正控制台打印
                        var count = "";
                        $.each(res.data, function () {
                            var colors="";
                            if(this.productStats==1){
                                colors="red";
                            }else if(this.productStats==2){
                                colors="blue";
                            }
                            var colors1 = "";
                            if (this.stockUnit == 1) {
                                colors1 = "red";
                            }else if (this.stockUnit == 2) {
                                colors1 = "blue";
                            }else if (this.stockUnit == 3) {
                                colors1 = "green";
                            }else if (this.stockUnit == 4) {
                                colors1 = "pink";
                            }else if (this.stockUnit == 5) {
                                colors1 = "blue";
                            }else if (this.stockUnit == 6) {
                                colors1 = "orange";
                            }else if (this.stockUnit == 7) {
                                colors1 = "gray";
                            }else if (this.stockUnit == 8) {
                                colors1 = "black";
                            }else if (this.stockUnit == 9) {
                                colors1 = "pink";
                            }
                            count += `<tr>
                                                    <th>${this.productNumber}</th>
                                                    <th>${this.productName}</th>
                                                     <th style="color:${colors1}" >${this.stockUnit == 1 ? "条" : (this.stockUnit == 2 ? "张" : (this.stockUnit == 3 ? "车" : (this.stockUnit == 4 ? "车" : (this.stockUnit == 5 ? "天" : (this.stockUnit == 6 ? "小时" : (this.stockUnit == 7 ? "分钟" : (this.stockUnit == 8 ? "周" : (this.stockUnit == 9 ? "月" : ""))))))))}</th>
                                                    <th>${this.productSpecification}</th>
                                                    <th style="color:${colors}" >${this.productStats == 1 ? "自制" : (this.productStats == 2 ? "外购" : "")}</th>
                                                    <th>${this.processRouteId}</th>
                                                    <th>${this.maxInventory}</th>
                                                    <th>${this.minInventory}</th>
                                                    <th>${this.saveInventory}</th>
                                                    <th>${this.inventoryStore}</th>
                                                    <th> <img src="${this.productImage}" alt="成品图" width="60px" height="60px"></th>
                                                    <th>${this.createName}</th>
                                                    <th>${this.createDate.replace("T", " ").substring(0, 19)}</th>
                                                    <th>${this.updateName == null ? "" : this.updateName}</th>
                                                    <th>${this.updateDate == null ? "" : this.updateDate.replace("T", " ").substring(0, 19)}</th>
                                                                    </tr> `
                        })
                        $("tbody").html(count)
                    }
                })
            };

            // 加载工艺路线列表
            window.getProcessRouteList = function () {
                $.get({
                    url: '@ViewBag.Keep' + '/api/Department/ProcessRouteList',
                    async: false,
                    dataType: "json",
                    success: res => {
                        console.log(res.data); // 修正控制台打印
                        $.each(res.data, function () {
                            $("#processRouteId").append(`<option value="${this.processRouteId}">${this.processRouteName}</option>`);
                        })
                        form.render('select');
                    }
                })
            };


       


        });
    </script>


</body>
</html>




